<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 
      1、html的页面的浏览器图标设置功能 
          chrome 浏览器在第一次访问html页面时，如果没有图标会提示404错误，后续刷新或再次访问不会提示
          chrome 浏览器在html为定义图标指向时，默认访问的图标名称是 favicon.ico 
          html页面可以通过 <link rel="icon" href="图标文件">
    -->
    <!-- 
      2、开发服务器：不需要花钱，由开发者在自己的电脑上开启的模拟服务器【不能直接转换为生产服务器的】
         生成服务器：需要购买，并在外网进行部署，用于真实启动多个应用程序的服务器
     -->
    <!-- 
      ＜%= %＞ 是 lodash的内置模板语法,**用于在vue环境启动完成前，加载环境的相关配置【vue.config.js中的一些特殊配置】**
               lodash 是一个三方的 JS工具函数库，vue模块环境启动时，会由该工具库的 template 方法完成 HTML页面模板的加载和编译
      BASE_URL 是 vue模块化环境的 项目启动目录变量，用于完成html页面的静态资源和服务器项目目录的同步关系
    -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 
      htmlWebpackPlugin.options.title  => 读取 vue.config.js 中的 pages 页面配置的每个项目的 title属性值，描述项目名称
    -->
    <title><%= htmlWebpackPlugin.options.title %></title>
    <!-- built files will be auto injected -->
    <!-- aaaaa -->
  </head>
  <body>
    <!-- <h1>index</h1> -->
    <noscript>
      <!-- 当浏览器不支持JS脚本语法时，显示内部内容进行提示 -->
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
  </body>
</html>
